@import "../_colors.less";
@import "../_variables.less";

.loader {
  position: absolute;;
  margin: 0px auto;
  width: @loader-width;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s linear;
  max-height: 100vh;
  overflow: hidden;

  [loading] & {
    opacity: 1;
    z-index: 10;
  }

  &:before {
    content:'';
    display: block;
    padding-top: 100%;
  }
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}


.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation:
   dash 1.5s ease-in-out infinite,
   color 6s ease-in-out infinite
  ;
  stroke-linecap: round;
}

@keyframes rotate{
 100%{
  transform: rotate(360deg);
 }
}
@keyframes dash{
 0%{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
 }
 50%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35px;
 }
 100%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124px;
 }
}
@keyframes color{
  100%, 0%{
    stroke: @red;
  }
  40%{
    stroke: @blue;
  }
  66%{
    stroke: @green;
  }
  80%, 90%{
    stroke: @yellow;
  }
}
